<template>
  <div>
<!--    查询条件开始-->
    <el-form ref="queryForm" :model="menuDto" :inline="true" label-width="68px">
      <el-form-item label="权限名" prop="title">
        <el-input v-model="menuDto.name" placeholder="请输入权限名" clearable size="small" style="width:150px"/>
      </el-form-item>
      <el-form-item label="权限状态" prop="businessType">
        <el-select v-model="menuDto.status" placeholder="请选择状态" clearable size="small" style="width:150px">
          <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
        </el-select>
      </el-form-item>
      <el-form-item label="权限类型" prop="status">
        <el-select v-model="menuDto.type" placeholder="请选择类型" clearable size="small" style="width:150px">
          <el-option v-for="dict in businessTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getQueryMenuDto">搜索</el-button>
        <el-button type="normal" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
<!--    查询条件结束-->

<!--    表头按钮开始-->
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="success" size="mini" @click="openHandMenus">分配权限</el-button>

        <el-dialog title="选选权限" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <el-tree :data="menuList2"
                   show-checkbox
                   node-key="id"
                   ref="trees"
                   :default-checked-keys = MoRen
                   highlight-current
                   :filter-node-method="filterNode"
                   :props="defaultProps">
          </el-tree>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addHandMenus">确 定</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
<!--    表头按钮结束-->

<!--    数据表格开始-->
    <el-table :data="menuList" style="width: 100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :header-cell-style="{'color': '#3D4144'}">
      <el-table-column prop="id" label="权限编号" width="100px"/>
      <el-table-column prop="name" label="权限名"/>
      <el-table-column prop="path" label="路由"/>
      <el-table-column prop="type" label="类型" width="100" filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type === 1 ? '' : 'warning'" disable-transitions>{{scope.row.type===1 ? '目录':'菜单'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="创建人"/>
      <el-table-column prop="status" label="状态" width="100" filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'" disable-transitions>{{scope.row.status===0 ? '可用':'禁用'}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
<!--    数据表格结束-->
  </div>
</template>

<script>
import {getQueryMenuList, handMenuByRoleId} from "@/api/system";

export default {
  name: "menuList2",
  props:['menuList','menus','getMenuList','roleId'],
  data(){
    return{
      // 查询状态
      statusOptions:[{"dictValue":"0","dictLabel":"可用"},{"dictValue":"1","dictLabel":"禁用"}],
      // 查询类型
      businessTypeOptions:[ {"dictValue":"1","dictLabel":"目录"}, {"dictValue":"2","dictLabel":"菜单"}],
      // 模糊查询条件
      menuDto:{
        name:undefined,
        type:undefined,
        status:undefined
      },
      // 菜单显示
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      //默认选中
      MoRen:[],
      menuList2:[],
      // 过滤
      filterText:'',
      // 弹出框是否状态
      dialogVisible: false,

    }
  },
  created() {

  },
  methods:{

    // 分配权限  部门id--选中的权限
    addHandMenus(){
      //获取选中的值
      const allMenuId = [].concat(this.$refs.trees.getCheckedKeys(), this.$refs.trees.getHalfCheckedKeys())
      console.log(JSON.stringify(allMenuId))
      const query1 = {
        roleId: this.roleId,
        menuIds: JSON.stringify(allMenuId)
      }
      handMenuByRoleId(this.roleId,allMenuId).then(res => {
        if(res.data){
          this.$message({
            message: '分配成功!',
            type: 'success'
          });
        }
      })
      this.dialogVisible = false;
      this.getQueryMenuDto()
    },

    // 过滤权限
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    //打开分配权限  数据回显
    openHandMenus(){
      this.menuList2 = this.menus
      this.MoRen = []
      if(this.roleId !== '' && this.roleId !== undefined){
        this.dialogVisible = true
        // 回显拥有的权限
        this.menuList.map(key => {
            key.children.map(res => {
              this.MoRen.push(res.id)
            })
        })
      }else{
        this.$message({
          message: '请选择部门再进行操作',
          type: 'warning'
        });
      }
    },

    // 弹出层是否关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.MoRen = []
          done();
        })
        .catch(_ => {});
    },

    // 根据条件查询权限
    getQueryMenuDto(){
      const queryMenu = {
        name: this.menuDto.name,
        type:this.menuDto.type,
        status:this.menuDto.status,
        roleId: this.roleId
      }
      // 执行查询方法
      getQueryMenuList(queryMenu).then( res => {
        this.getMenuList(res.data)
      })
    },

    // 重置按钮点击事件
    resetQuery(){
      this.menuDto = {
        name:undefined,
        type:undefined,
        status:undefined
      }
      this.getQueryMenuDto()
    }

  },
  //深度监视
  watch:{
    filterText(val) {
      this.$refs.trees.filter(val);
    },
    'menuDto.name':{
      handler(newVal,oldVal){
        this.getQueryMenuDto()
      },
      deep:true
    },
    'menuDto.status':{
      handler(newVal,oldVal){
        this.getQueryMenuDto()
      },
      deep:true
    },
    'menuDto.type':{
      handler(newVal,oldVal){
        this.getQueryMenuDto()
      },
      deep:true
    },
    deep:true
  }
}
</script>

<style scoped>

</style>
